<script lang="ts" setup>
import { defineAsyncComponent, ref } from 'vue';
import { storeToRefs } from 'pinia';
import useStore from '@/store';
import router from '@/router';
import { useRoute } from "vue-router";
import { CirclePlusFilled } from '@element-plus/icons-vue';
const { posts } = useStore();
const { getPosts } = posts;
const { list } = storeToRefs(posts);
const postBar = defineAsyncComponent(() => import('@/components/PostBar.vue'));
const infoCollection = defineAsyncComponent(() => import('@/components/InfoCollection.vue'))
const infoColl = ref();
const page = useRoute().query.page as string;
const idx = parseInt(page) || 1;
getPosts(idx);
const refIdx = ref(idx);
const handleCurrentChange = (val: number) => {
  getPosts(val);
  refIdx.value = val;
  router.push({
    path: '/main',
    query: {
      page: val,
    }
  });
}
const handleGoToEditor = () => {
  infoColl.value.dialogFormVisible = true;
}
</script>

<template>
  <div class="main">
    <template v-for="(item, idx) in list" :key="idx">
      <post-bar :idx="idx">
      </post-bar>
    </template>
    <div class="page-bar">
      <el-pagination :current-page.sync="refIdx" @current-change="handleCurrentChange" :page-size="10"
        layout="prev, pager, next" :total="100" />
    </div>
    <info-collection ref="infoColl"></info-collection>
    <span class="go-to-editor" @click="handleGoToEditor">
      <el-icon>
        <CirclePlusFilled />
      </el-icon>
    </span>
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/scss";

.main {
  width: $minWid;
  margin: 0 auto;
  padding-top: 35px;
}

.el-pagination {
  margin: 35px 0 15px;
  justify-content: center;
}

.go-to-editor {
  color: $theme;
  position: fixed;
  cursor: pointer;
  bottom: 60px;
  right: 60px;
  font-size: 60px;
}
</style>